<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isErrorPage="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="t" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt" %>
<t:layout_admin>
    <jsp:body>
        <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/tabcontent.css"/>">
        <script type="text/javascript" src="<c:url value="/resources/js/tabcontent.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/resources/js/checkinputproduct.js"/>"></script>
        <!-- TinyMCE -->
        <script type="text/javascript" src="<c:url value="/resources/js/tiny_mce/tiny_mce.js"/>"></script>
        <script type="text/javascript">
            tinyMCE.init({
                // General options
                mode: "textareas",
                theme: "advanced",
                plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",
                // Theme options
                theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
                theme_advanced_toolbar_location: "top",
                theme_advanced_toolbar_align: "left",
                theme_advanced_statusbar_location: "bottom",
                theme_advanced_resizing: true,
                // Replace values for the template plugin
                template_replace_values: {
                    username: "Some User",
                    staffid: "991234"
                }
            });
        </script>
        <!-- /TinyMCE -->
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td class="bgtitle">
                    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                        <tr>
                            <td width="20">
                                <img src="<c:url value="/resources/images/mui_ten.gif" />"></td>
                            <td valign="bottom" class="title">Danh sách sản phẩm</td>
                            <td width="10" valign="bottom">&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>     
            <tbody>
                <tr>
                    <td valign="top">
                        <table width="100%" style="border-collapse: collapse" border="0" cellpadding="0" cellspacing="0">
                        </table>
                        <br>
                        <!-- 3 menu cố định -->
                        <div id="pettabs" class="indentmenu">
                            <ul>
                                <li>
                                    <a href="#" rel="dog1" class="selected">
                                        <strong>Sản phẩm</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" rel="dog2" class="">
                                        <strong>Thêm sản phẩm</strong>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" rel="dog3" class="">
                                        <strong>Danh mục</strong>
                                    </a>
                                </li>

                            </ul>
                            <br style="clear: left">
                        </div>

                        <!-- Chọn menu nào thì tab đó xuất hiện -->
                        <div style="border:1px solid #CCCCCC; width:960px; padding-bottom:0px; padding-left:0px; padding-right:0px; padding-top:0px;">
                            <!-- Dog 1, chèn nội dung vào đây --->
                            <div id="dog1" class="tabcontent" style="display: blosck;">
                                <style type="text/css">

                                    #color{
                                        -moz-column-wibth:4px;
                                        -webkit-column-width:4px;
                                        -moz-column-gap:1px;
                                        -webkit-comlum-gap:1px;
                                        -moz-column-gap:1px solid red;
                                        -webkit-column-gap:1px solid red;
                                        -webkit-column-count:7;
                                    }    

                                </style>   	
                                <!--form them san pham-->
                                <form action="admin/product" method="post" enctype="multipart/form-data" name="loginForm" id="loginForm" style="margin:0; padding:0" onsubmit="return verifyloginForm(this)">

                                    <table class="display dataTable" id="example" width='100%' align='center' border='0' cellpadding='2'  cellspacing='0' style='border-collapse:collapse;font-size:12px'>

                                        <thead>
                                            <tr>
                                                <th height='30' class='bgmenupro border3' bgcolor='#DDDDDD' style="width:23px!important">
                                        <div align='center'>
                                            <strong>STT</strong>
                                        </div>
                                        </th>
                                        <th class='bgmenupro border3' bgcolor='#DDDDDD' style="width:52px!important">
                                        <div align='center'>
                                            <strong>Mã</strong>
                                        </div>
                                        </th>
                                        <th class='bgmenupro border3' bgcolor='#DDDDDD' style="width:32px!important">
                                        <div align='center'>
                                            <strong>Hình</strong>
                                        </div>
                                        </th>
                                        <th class='bgmenupro border3' bgcolor='#DDDDDD' width='13%'>
                                        <div align='center'>
                                            <strong>Tên sản phẩm</strong>
                                        </div>
                                        </th>
                                        <th class='bgmenupro border3' bgcolor='#DDDDDD' width='13%'>
                                        <div align='center'>
                                            <strong>Giá nhập</strong>
                                        </div>
                                        </th>
                                        <th class='bgmenupro border3' bgcolor='#DDDDDD' width='13%'>
                                        <div align='center'>
                                            <strong>Đã bán</strong>
                                        </div>
                                        </th>
                                        <th class='bgmenupro borderfull' bgcolor='#DDDDDD' width='13%'>
                                        <div align='center'>
                                            <strong>Giá bán</strong>
                                        </div>
                                        </th>
                                        <th class='bgmenupro borderfull' bgcolor='#DDDDDD' width='8%'>
                                        <div align='center'>
                                            <strong>Tồn</strong>                     
                                        </div>
                                        </th>
                                        <th class='bgmenupro borderfull' bgcolor='#DDDDDD' width='3%'>
                                        <div align='center'>
                                            <strong>Tùy chỉnh</strong>                     
                                        </div>
                                        </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <!--load đơn hàng-->
                                            <c:forEach var="sanpham" varStatus="sanphamCounter"  items="${listSanPham}">
                                                <tr>
                                                    <td class='border3'>${sanphamCounter.count}</td>
                                                    <td class='border3'>${sanpham.getHang().getTenHang()}</td>
                                                    <td class='border3'><img src="<c:url value="/resources/images/product/${sanpham.getHinh()}"/>" alt="${sanpham.getTenSanPham()}" width="40" height="40" border="0"></td>
                                                    <td class='border3'>
                                                        <a href="<c:url value="/admin/editsanpham/${sanpham.getMaSp()}"/>" onclick="NewWindow(this.href, 'MPCamera', '900', '650', 'yes');
                                                                return false">
                                                            <strong>${sanpham.getTenSanPham()}</strong></td>
                                                    <td class='border3'><fmt:formatNumber type="number" value="${sanpham.getDonGia()}" /> VNÐ</td>

                                                    <td class='border3'>${sanpham.getSoLuongDangMua()}</td>  
                                                    <td class='border3'><fmt:formatNumber type="number" value="${sanpham.getDonGia()*1.1}" /> VNÐ</td>
                                                    <td class='border3'>${sanpham.getSoLuongTon()}</td>
                                                    <td class='borderfull'>
                                                        <div align='center'>
                                                            <a href='<c:url value="/admin/editsanpham/${sanpham.getMaSp()}"/>' onclick="NewWindow(this.href, 'MPCamera', '900', '650', 'yes');
                                                                    return false">
                                                                <img src='<c:url value="/resources/images/edit.jpg"/>' border='0'>
                                                            </a>
                                                        </div>
                                                    </td>

                                                </tr>
                                            </c:forEach>
                                            <!--load xong -->
                                        </tbody>

                                    </table>
                                    <br>
                                    <br>

                                </form>
                                <br />
                                <!-- begin: popup!-->
                                <script language="javascript">
                                    /*
                                     Auto center window script- Eric King (http://redrival.com/eak/index.shtml)
                                     Permission granted to Dynamic Drive to feature script in archive
                                     For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
                                     */

                                    var win = null;
                                    function NewWindow(mypage, myname, w, h, scroll) {
                                        LeftPosition = (screen.width) ? (screen.width - w) / 2 : 0;
                                        TopPosition = (screen.height) ? (screen.height - h) / 2 : 0;
                                        settings =
                                                'height=' + h + ',width=' + w + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',resizable'
                                        win = window.open(mypage, myname, settings)
                                    }

                                </script>
                                <!-- end: popup!-->
                                <!--/hiện thị sản phẩm-->
                            </div>

                            <!--Dog2,Thêm sản phẩm-->
                            <div id="dog2" class="tabcontent" style="display: none;">                     
                                <form action="<c:url value="/admin/addsanpham" />" method="post" name="addproduct" id="addproduct" style="margin:0; padding:0" onsubmit="return checkinputproduct(this)">
                                    <table width="95%" border="0" cellpadding="3" cellspacing="0" style="font-family: Tahoma; font-size: 10pt; border-collapse:collapse; padding:10px">
                                        <tbody>
                                            <tr>
                                                <td class="bgtitle" colspan="6">
                                                    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                                                        <tr>
                                                            <td width="20">
                                                                <img src="<c:url value="/resources/images/mui_ten.gif" />"></td>
                                                            <td valign="bottom" class="title">Thêm sản phẩm</td>
                                                            <td width="10" valign="bottom">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>
                                                <td></td>
                                            </tr>  
                                            <tr>
                                                <td width="10%">Mã sản phẩm</td>
                                                <td width="30%">
                                                    <select id="hang" name="hang">
                                                        <c:forEach var="hang" varStatus="HangCounter" items="${listHang}">
                                                            <option value="${hang.getMaH()}">${hang.getTenHang()}</option>
                                                        </c:forEach>
                                                    </select>
                                                </td>
                                                <td width="10%">Tên sản phẩm</td>
                                                <td width="20%">
                                                    <input name="tensanpham" type="text" class="box_input" id="tensanpham" size="24">
                                                </td>                              
                                                <td width="10%">Hình ảnh</td>
                                                <td width="20%">
                                                    <input name="hinh" type="file" class="box_input" id="hinh">
                                                </td>
                                            </tr>
                                            <tr bgcolor="">
                                                <td rowspan="2">Màu sắc</td>
                                                <td id="color" rowspan="2" style="margin-right:30px">
                                                    
                                                        <c:forEach var="mau" varStatus="mauCounter" items="${listMau}">
                                                            <input type="checkbox" id="mau" name="mau${mauCounter.count}" value="${mau.getMaM()}">${mau.getTenMau()}
                                                        </c:forEach>
                                                   
                                                </td>
                                                <td valign="top">Bảo hành</td>
                                                <td>
                                                    <input name="baohanh" type="text" class="box_input" id="baohanh" size="14">
                                                </td>
                                                <td valign="top">Số lượng</td>
                                                <td>
                                                    <input name="soluongton" type="text" class="box_input" id="soluongton" size="24">
                                                </td>
                                            </tr>
                                            <tr bgcolor="">

                                                <td valign="top">Giá bán</td>
                                                <td valign="top">
                                                    <input name="dongia" type="text" class="box_input" id="dongia" size="14">VND
                                                </td>
                                                <td valign="top">Hàng mới</td>
                                                <td>
                                                    <select id="tinhtrangsanpham" name="tinhtrangsanpham">
                                                        <c:forEach var="tinhtrangsanpham" varStatus="ttspCounter" items="${listTTSP}">
                                                            <option value="${tinhtrangsanpham.getMaTtsp()}">${tinhtrangsanpham.getTenTinhTrangSanPham()}</option>
                                                        </c:forEach>                    
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr bgcolor=""> 

                                            </tr>
                                            <tr>
                                                <td valign="top" colspan="2">Chi tiết sản phẩm</td>

                                            <tr>
                                                <td colspan="5">
                                                    <textarea id="chitietsanpham" name="chitietsanpham" rows="55" cols="90" style="width: 80%">
                                                        <p class="MsoNormal">
                                                        <font size="2" face="tahoma,arial,helvetica,sans-serif"><strong>Thông tin chi tiết</strong><br>
                                                        <span>+ Độ phân giải:<br>
                                                        + Cảm biến:<br>
                                                        + Zoom quang: 4x <br>
                                                        + Zoom kĩ thuật số: <br>
                                                        + Định dạng tập tin:<br>
                                                        + ISO :<br>
                                                        + Màn hình LCD:<br>
                                                        + Thẻ nhớ :<br>
                                                        + Bộ nhớ trong :<br>
                                                        + Quay phim:<br>
                                                        + Chế độ tự động chụp:<br>
                                                        + Tiêu cự: <br>
                                                        + Chuẩn kết nối :<br>
                                                        + Nguồn :<br>
                                                        + Kích thước:<br>
                                                        + Trọng lượng:</span></font></p>
                                                    </textarea>
                                                </td>
                                                <td width=30% rowspan="4" valign="top">                                           
                                                    <input type="submit" name="createproduct" id="createproduct" value="Thêm">
                                                    <input type="reset" name="reset" id="addoneproduct" value="Làm lại">     
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table> 
                                </form>
                            </div>
                            <script type="text/javascript">
                                function checkinputproduct(theForm)
                                {
                                    with (theForm) {
                                        if (tensanpham.value == "")
                                        {
                                            alert("Vui lòng nhập tên sản phẩm.");
                                            tensanpham.focus();
                                            return false;
                                        }

                                        if (hinh.value == "")
                                        {
                                            alert("vui lòng chọn hình ảnh.");
                                            hinh.focus();
                                            return false;
                                        }
                                        if (soluongton.value == "")
                                        {
                                            alert("Vui lòng nhập số lượng.");
                                            soluongton.focus();
                                            return false;
                                        }
                                        if (khuyenmai.value == "")
                                        {
                                            alert("Vui lòng nhập khuyến mãi, nếu không có nhập Không.");
                                            khuyenmai.focus();
                                            return false;
                                        }
                                        if (dongia.value == "")
                                        {
                                            alert("Vui lòng nhập giá nhập.");
                                            dongia.focus();
                                            return false;
                                        }
                                        if (buypriece.value == "")
                                        {
                                            alert("Vui lòng nhập giá bán.");
                                            buypriece.focus();
                                            return false;
                                        }

                                        return true
                                    }
                                }
                            </script>
                            <!--Dog2,Thêm sản phẩm xong-->

                            <!-- Dog 3, chèn nội dung vào đây --->
                            <div id="dog3" class="tabcontent" style="display: none;">
                                <!--noi dung cua category-->
                                <form action="/admin/product" method="post" enctype="multipart/form-data" name="loginForm" id="loginForm" style="margin:0; padding:0" onsubmit="return verifyloginForm(this)">   
                                    <table width='50%' align='center' border='0' cellpadding='2' cellspacing='0'  style='border-collapse:collapse'>
                                        <tbody>
                                            <tr>
                                                <td class="bgtitle" colspan="3">
                                                    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                                                        <tr>
                                                            <td width="20">
                                                                <img src="<c:url value="/resources/images/mui_ten.gif" />"></td>
                                                            <td valign="bottom" class="title">Danh mục sản phẩm</td>
                                                            <td width="10" valign="bottom">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </td>

                                            </tr>  
                                            <tr>
                                                <td height='30' class='bgmenupro border3' bgcolor='#DDDDDD' width='5%'>
                                                    <div align='center'>
                                                        <strong>STT</strong>
                                                    </div>
                                                </td>
                                                <td class='bgmenupro border3' bgcolor='#DDDDDD' width='15%'>
                                                    <div align='center'>
                                                        <strong>Danh mục</strong>
                                                    </div>
                                                </td>
                                                <td class='bgmenupro border3' bgcolor='#DDDDDD' width='15%'>
                                                    <div align='center'>
                                                        <strong>Link</strong>
                                                    </div>
                                                </td>
                                                <td class='bgmenupro border3' bgcolor='#DDDDDD' width='15%'>
                                                    <div align='center'>
                                                        <strong>Parent</strong>
                                                    </div>
                                                </td>
                                                <td class='bgmenupro borderfull' bgcolor='#DDDDDD' width='5%'>
                                                    <div align='center'>
                                                        <strong>Tùy chỉnh</strong>                     
                                                    </div>
                                                </td>
                                            </tr>
                                            <!--load đơn hàng-->
                                            <c:forEach var="hang" varStatus="hangCounter" items="${listHang}">

                                                <tr>
                                                    <td class='border3'>
                                                        <div align='center'>${hangCounter.count}</div>
                                                    </td>
                                                    <td class='border3'>
                                                        <div align='center'>
                                                            <input type="hidden" id="categoryname" value="${hang.getMaH()}">
                                                            ${hang.getTenHang()}</div>
                                                    </td>
                                                    <td class='border3'>
                                                        <div align='center'></div>
                                                    </td>
                                                    <td class='border3'>
                                                        <div align='center'></div>
                                                    </td>
                                                    <td class='borderfull'>
                                                        <div align='center'>
                                                            <!--
                                                            <a href='<c:url value="/admin/product/edit/{p.idproduct}"/>' onclick="categoryname.">
                                                                <img src='<c:url value="/resources/images/edit.jpg"/>' border='0'>
                                                            </a>-->
                                                        </div>
                                                    </td>
                                                </tr>
                                            </c:forEach>
                                            <tr>
                                                <td class=' border3' width='15%'>
                                                    <div align='center'>
                                                        <input type="hidden" value="">
                                                    </div>
                                                </td>
                                                <td class=' border3'  width='15%'>
                                                    <div align='center'>
                                                        <input type="text" id="categorynamenew" name="categorynamenew">
                                                    </div>
                                                </td>
                                                <td class=' border3'  width='15%'>
                                                    <div align='center'>
                                                        <input type="text" id="linknew" name="linknew">
                                                    </div>
                                                </td>
                                                <td class=' border3'  width='15%'>
                                                    <div align='center'>
                                                        <input type="text" id="parentnew" name="parentnew">
                                                    </div>
                                                </td>
                                                <td class=' borderfull' width='5%'>
                                                    <div align='center'>
                                                        <a href='/admin/product/edit/{$p.idproduct}' onclick="">
                                                            <img src='/templates/images/edit.jpg' border='0'>
                                                        </a>                
                                                    </div>
                                                </td>
                                            </tr>
                                            <!--load xong -->
                                            <tr>
                                                <td colspan="7">
                                                    <br>
                                                    <div align='center'>
                                                        <input type="submit" id="savecategory" name="savecategory" value="Lưu CSDL">
                                                        <input type="reset" id="resetcatyrory" name="resetcatyrory" value="Làm lại">
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </form>
                                <!--load xong catrgory-->
                            </div>
                            <!-- Dog 4, chèn nội dung vào đây --->
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

        <script type="text/javascript">
            var mypets = new ddtabcontent("pettabs")
            mypets.setpersist(true)
            mypets.setselectedClassTarget("link")
            mypets.init(0)
        </script>
        <br>
        <!---ham tao tab-->

        <!--loc-->
    </jsp:body>
</t:layout_admin>